<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: flex;
            list-style: none;
        }
    </style>
</head>

<body>
    <h3>玩家1:</h3>
    <ul id='playerA'></ul>
    <h3>玩家2:</h3>
    <ul id='playerB'></ul>
    <h3>玩家3:</h3>
    <ul id='playerC'></ul>
    <h3>底牌:</h3>
    <ul id='playerDef'></ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
        const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2'];
        const flower = ["♠️", "♥️", "♣️", "♦️"]; // 黑桃 < 红心 < 梅花 < 方块

        function init() {
            // 54 牌
            let arr = [];
            let num = 1;
            for (let n = 0; n < number.length; n++) {
                for (let f = flower.length - 1; f >= 0; f--) {
                    let obj = {
                        str: flower[f] + number[n],
                        number: n,
                        flower: f,
                        url: `../img/poker/pkp_${num++}.jpg`
                    };
                    arr.push(obj);
                }
            }
            arr.push({
                str: '小王',
                number: 53,
                url: `../img/poker/pkp_53.jpg`
            }, {
                str: '大王',
                number: 54,
                url: `../img/poker/pkp_54.jpg`
            });

            return _.shuffle(arr);
        }
        let arr = init()  // 54张打乱
        let result = _.chunk(arr, 17);
        let player1 = result[0];
        let player2 = result[1];
        let player3 = result[2];
        let def = result[3];

        // 排序
        player1 = _.orderBy(player1, ['number', 'flower'], ['asc', 'asc']);
        console.log(player1);

        var compiled = _.template('<% _.forEach(player1, function(user) { %><li><img src=<%- user.url %>></li><% }); %>');
        playerA.innerHTML = compiled();
        // console.log(str);
    </script>
</body>

</html>